* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font: 1em/1.3 sans-serif;
    width: 100%;
}

/*页头*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #6C757D;
}

/*页头中部*/
#headMid ul {
    padding: .5em 0;
    height: 3em;
}

/*页头中部左部*/
#midHeadLeft {
    float: left;
}

/*页头中部右部*/
#midHeadRight {
    float: right;
}

#title {
    font-size: 3em;
    color: white;
}

/*页头中部链接*/
#headMid ul li {
    display: inline;
    list-style: none;
    text-align: center;
    line-height: 3em;
}

#headMid ul li>button {
    display: inline-block;
    padding: 0 10px;
    color: rgb(71, 0, 0);
    font-size: 1em;
    width: 5em;
    height: 3em;
    margin-right: 1em;
    background-color: #b0eed4;
    border: 2px solid #99a8b5;
    border-radius: 2px;
}

#headMid ul li>button:hover {
    background-color: #e9b4b4;
    color: #f50000;
    border: 3px solid rgb(169, 126, 160);
}

hr {
    clear: both;
}

/*侧边栏全屏覆盖*/
#asideArea {
    position: fixed;
    width: 0;
    height: 100%;
    top: var(--x-head-height);
    background-color: rgba(0, 0, 0, 0.5);
}

/*侧边栏*/
#mySidenav {
    border-top: 2px solid black;
    height: 100%;
    overflow-x: hidden;
    background-color: #7b868f;
    transition: 0.5s;
    border-right: 0 solid #000000;
}

/*侧边栏子项*/
#mySidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1.5em;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    border-bottom: 1px solid black;
}

#mySidenav a:hover {
    background-color: #d2e0ed;
    color: #003af5;
    outline: 2px #303a42 solid;
}

/*主体区*/
#main {
    margin-top: var(--x-head-height);
    transition: margin-left .5s;
    overflow: hidden;
    margin-left: 2em;
    color: hsl(var(--x-text-color), 90%, 20%);
}

footer {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
    width: 100%;
}

#footer {
    background-color: #ccf2ff;
    padding: .5em 1em .2em 0;
    line-height: 1em;
    text-align: right;
}

#footer button {
    background-color: #ccf2ff;
    /* color: #003af5; */
    /* outline: 1px #006fce solid; */
    border: 1px solid darkgreen;
    border-radius: 2px;
}

/*媒体查询*/
/*手机，隐藏侧边栏*/
@media screen and (max-width: 900px) {
    #asideArea {
        width: 0;
    }

    #mySidenav {
        width: 0;
        border-right: 0;
    }

    #main {
        margin-left: 2em;
        margin-right: 2em;
    }

    #tips {
        margin-left: 25% !important;
    }
}

/*手机，电脑，隐藏侧边栏*/
@media screen and (min-width: 900px) {
    #asideBtn {
        display: none;
    }

    #asideArea {
        width: 0 !important;
    }

    #mySidenav {
        width: 200px !important;
        border-right: 1px !important;
    }

    #main {
        margin-left: 230px;
        margin-right: 2em;
    }
}

/*电脑界面*/
@media screen and (min-width: 1200px) {
    #mySidenav {
        width: 250px !important;
        border-right: 1px !important;
    }

    #main {
        margin-left: 280px;
        margin-right: 2em;
    }
}

table {
    border-collapse: collapse;
    width: 100%;
    display: none;
}

td,
th {
    border: 1px solid #ddd;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #f2d4b0;
}

.firstRow {
    background-color: #fffdbe;
}

.active {
    display: table;
}

.asideActive {
    background-color: #e9cdb4;
    color: #722501 !important;
}

#mainHead button {
    background-color: #92b06d;
    border: none;
    color: white;
    margin: 0 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    transition: .25s;
}

#tbTitle {
    border-left: #896262 solid 4px;
    color: #722501;
    padding: 10px;
    display: inline-block;
    font-size: 1em;
}

#mainHead {
    background-color: #d9f6fe;
    margin-bottom: 10px;
}


#mainHead button:hover {
    background-color: #b4e9e9;
    color: #046909;
}